<%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>注册 - 便民医疗服务系统</title>
		<link rel="shortcut icon" href="../assets/images/logo.png" type="image/x-icon" />
		<link rel="stylesheet" href="../assets/layui/css/layui.css">
		<link rel="stylesheet" href="../assets/css/register.css">
		<link rel="stylesheet" href="../assets/css/login.css">
		
	</head>

	<body style="background-image: url(../assets/images/slider/slider-image-1.jpg);background-repeat: no-repeat;width: 100%;height: 100%;background-size: cover">
		<div class="layui-main user">
			<div class="layui-clear main">
				<div class="layui-logo">
				</div>
				<fieldset class="layui-elem-field layui-field-title">
					<legend class="text-white">便民医疗服务系统注册</legend>
				</fieldset>
				<div class="layui-form layui-form-pane">
					<div class="layui-form">
						<div class="layui-form-item">
							<input class="layui-input" id="phone" placeholder="请输入手机号" type="text" maxlength="11" lay-verify="required|phone|regexit" autofocus="autofocus" autocomplete="off">
						</div>
						<div class="layui-form-item">
							<input class="layui-input" id="password" placeholder="请输入密码" type="password" maxlength="20" lay-verify="required|pwd" autocomplete="off">
						</div>
						<div class="layui-form-item">
							<input class="layui-input" id="repassword" placeholder="请再次输入密码" type="password" maxlength="20" lay-verify="required|rePwd" autocomplete="off">
						</div>						
						<div class="layui-form-item form_code">
							<input id="msg-code" class="layui-input" placeholder="请输入短信验证码" type="text" maxlength="6" lay-verify="required|number|msgcode">
							<div class="code">
								<a id="msg-btn" class="layui-btn layui-btn-normal tel-btn" style="width: 120px;">获取验证码</a>
							</div>
						</div>
						<div class="layui-form-item" style="float: left;margin-left: -10px;">
							<input lay-filter="agreen-checkbox" title="我同意" type="checkbox" lay-skin="primary" checked>
							<a href="#" target="_blank">《注册协议》</a>
						</div>
						<div class="layui-form-item">
							<button id="reg" type="submit" class="login_btn layui-btn layui-btn-radius layui-btn-normal" lay-submit >立即注册</button>
						</div>
						<div>
							<small class="text-white">已经有账户了？</small>
							<a href="login.jsp">点此登录</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="../assets/layui/layui.all.js"></script>
		<script type="text/javascript" src="../assets/js/register.js"></script>
		
		<script type="text/javascript">
		// 发送短信验证码
		var InterValObj; // 定时器变量
		var count = 60; // 间隔函数，1秒执行
		var curCount; // 当前剩余秒数
		var msg_send_count = 0;
		// 发送验证码
		$("#msg-btn").on("click", function() {
			if($(this).prop("disabled") != "disabled") {
				vailPhone();
				if(!/^1[34578]\d{9}$/.test($("#phone").val())) {
					layer.msg("请先输入正确的手机号", {
						icon: 5
					});
					return false;
				} else if(phone_status == 0) {
					layer.msg("该手机号已被注册", {
						icon: 5
					});
					return false;
				}
				msg_send_count++;
				curCount = count;
				// 设置button效果，开始计时
				$("#msg-btn").addClass("layui-btn-disabled");
				$("#msg-btn").prop("disabled", "disabled"); // 设置按钮为禁用状态
				$("#msg-btn").text("正在发送..."); // 更改按钮文字
				// 向后台发送处理数据
				$.ajax({
					url: "../sendSMS",
					type: "post",
					data: {
						"phone": $("#phone").val(),

					},
					success: function(result) {
						if(result.status == 0) {
							$("#msg-btn").text(curCount + "秒后再次获取"); // 更改按钮文字
							InterValObj = setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
						} else {
							/*layui.msg(result.msg);*/
							$("#msg-btn").val("重新发送验证码");
							$("#msg-btn").removeClass("layui-btn-disabled");
							$("#msg-btn").removeAttr("disabled"); // 移除禁用状态改为可用
						}
					}
				});
			}
		});

		// timer处理函数
		function SetRemainTime() {
			if(curCount == 0) {
				clearInterval(InterValObj); // 停止计时器
				$("#msg-btn").removeClass("layui-btn-disabled");
				$("#msg-btn").removeAttr("disabled"); // 移除禁用状态改为可用
				$("#msg-btn").text("重新发送验证码");
			} else {
				curCount--;
				$("#msg-btn").text(curCount + "秒后再次获取");
			}
		}
			
			
		</script>
		
		<!--  验证码倒计时 ，AJAX请求验证码-->  		
		 <script type="text/javascript"> 
		
		$(function () {
			$("#msg-btn").click(function() {
				$.ajax({
				    url:"../patientRegist",
				    type:"post",
				    contentType:"application/json",//contentType
				    data:JSON.stringify({
				 	   "phone":$("#phone").val()
				 	   
				    }),
				    success:function(result){
				    	
				    	if(result==""){
				    		
				    		$("#mobile_prompt").html("用户名已经存在了");
				    		
				    		}
				        
				    }
		
				});
		
			});
		
		})
		</script>
		<script type="text/javascript">		

		$(function () {
			$("#reg").click(function() {
				if($("#phone").val()==""){
					layer.msg('手机号码不能为空~', {
						icon: 5					
					});
				}else if($("#msg-code").val()==""){
						layer.msg('验证码不能为空~', {
							icon: 5					
						});
					}else if($("#password").val()==""){
						layer.msg('密码不能为空~', {
							icon: 5					
						});
					}else if($("#password").val()!=$("#repassword").val()){
						layer.msg('密码不一致~', {
							icon: 5					
						});
						
					}else{
						$.ajax({
						    url:"../Register",
						    type:"post",
						   /*  contentType:"application/json",//contentType */
						    data:{
						 	   "phone":$("#phone").val(),
						 	   "userPwd":$("#password").val(),
						 	   "code":$("#msg-code").val()  
						 	   
						    },
						    success:function(result){
						    	
						    	if(result==false){
						    		layer.msg('注册失败~', {
			 							icon: 5
			 					
			 						}, function(){
			 							window.location="register.jsp";
									});
						    	
						    	
						    		
						    		}else{
						    			layer.msg('注册成功~', {
											icon: 6
										
										}, function(){
											window.location="login.jsp";
										});
						    			
						    			
						    		}
						        
						    }		
						});
				}

			});
			

		})
	</script>
	</body>    
	


</html>